<template>
  <a-card title="已过期" v-bind="$attrs" hoverable>
    <vxe-grid ref="xGrid2" v-bind="gridOptions"/>
  </a-card>
</template>
<script lang="tsx" name="GoodsOfEditList" setup>
import { reactive, ref } from 'vue';
import { VxeGridProps, VxeTablePropTypes } from 'vxe-table';
import { columnsOfExpire } from './data';
import { getStockExpire } from "/@/api/wms/goods";

const xGrid2 = ref()

const cellStyle: VxeTablePropTypes.CellStyle = ({ row, column }) => {
  const include = ['name', 'diff']
  if (include.indexOf(column.field) >= 0) {
    return {
      color: 'red',
    }
  }
}
const gridOptions = reactive<VxeGridProps>({
  id: 'goodsOfStockExpire',
  border: false,
  stripe: true,
  // minHeight: window.innerHeight - 350,
  keepSource: true,
  loading: false,
  resizable: true,
  showFooter: false,
  showOverflow: false,
  highlightCurrentRow: false,
  highlightHoverRow: true,
  highlightCurrentColumn: true,
  highlightHoverColumn: true,
  // cellClassName: cellClassName,
  cellStyle: cellStyle,
  // emptyRender: {name: 'NotDataOfSelectGoods', events: {click: ()=> modalOfGoods.data.show = true},},
  rowConfig: {
    useKey: true,
    isCurrent: false,
    isHover: true,
    keyField: 'ID',
  },
  columnConfig: {
    useKey: true,
    isCurrent: false,
    isHover: true,
  },
  customConfig: {
    storage: true,
  },
  sortConfig: {
    trigger: 'default',
    remote: false
  },
  filterConfig: {
    remote: false
  },
  // mouseConfig: {selected: true},
  // keyboardConfig: {
  //   isArrow: true,
  //   isEnter: true,
  //   isDel: false, 
  //   isTab: true,
  //   enterToTab: false,
  //   isEdit: true, 
  //   isChecked: true,
  // },
  toolbarConfig: {
    refresh: true,
    export: false,
    print: false,
    zoom: false,
    custom: false,
  },
  printConfig: {
    sheetName: '',
    mode: 'current',
    // isMerge: true,
    modes: ['current', 'all'],
    // beforePrintMethod: ({ content, options }) => {
    //   let result = props.printTop + content + props.printBottom;
    //   return result;
    // }
  },
  exportConfig: {
    remote: false,
    isMerge: true,
    types: ['xlsx'],
    modes: ['current', 'all'],
  },
  // footerMethod: ({columns, data,}) => {
  //   if (data.length === 0) {
  //     return []
  //   }
  //   return [
  //     columns.map((column, columnIndex) => {
  //       if (columnIndex === 0) {
  //         return '合计'
  //       }
  //       if (['qty'].includes(column.field)) {
  //         let sum = data.reduce((pre, cur,)=>{
  //           return pre + Number(cur['qty']);
  //         }, 0)
  //         return XEUtils.commafy(XEUtils.toNumber(sum), { digits: 1, });
  //       }
  //       return null
  //     }),
  //   ]
  // },
  pagerConfig: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 50, 100, 200, 500, 1000],
    layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
    pagerCount: 3,
    border: true,
    background: true,
    perfect: true,
  },
  proxyConfig: {
    autoLoad: true,
    ajax: {
      // { page, sort, sorts, filters, form }
      query({ page, }) {
        return getStockExpire(page)
      },
      // queryAll() {
      //   if (props.queryAllApi) {
      //     let params = Object.assign({}, toRaw(props.queryParams),)
      //     return props.queryAllApi(params)
      //   }
      // }
    }
  },
  columns: columnsOfExpire,
})
</script>

<style scoped>
</style>
